const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 这个插件可以看官网还是很好用的
const productionGzipExtensions = ['js', 'css', 'html'] // 对什么文件进行压缩
function resolve (dir) {
  return path.join(__dirname, dir)
}
const isProd =
  process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'stage'
const Timestamp = new Date().getTime()

if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
  // add `ThemeColorReplacer` plugin to webpack plugins
  //vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin());
}

const vueConfig = {
  configureWebpack: (config) => {
    // webpack plugins
    config.plugins.push(
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(
        {
          resourceRegExp: /^\.\/locale$/,
          contextRegExp: /moment$/,
        }),
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        filename: '[path][base].gz', // [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串但是nginx其实会先判断是否有.gz后缀的相同文件，有的话直接返回，nginx自己不再进行压缩处理。而压缩是要时间的！不同级别的压缩率花的时间也不一样。所以提前准备gz文件，可以更加优化。而且你可以把压缩率提高点，这样带宽消耗会更小
        algorithm: 'gzip', // 压缩算法
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 处理所有匹配此 {RegExp} 的资源
        threshold: 10240, // 只处理比这个值大的资源。按字节计算
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
        deleteOriginalAssets: false
        // 删除源文件
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, // 控制打包生成js的个数
      }),
      new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 10000, // Minimum number of characters
      })
    )
    config.output.filename = `static/js/[name].${process.env.VUE_APP_VERSION}.${Timestamp}.js`
    config.output.chunkFilename = `static/js/[name].${process.env.VUE_APP_VERSION}.${Timestamp}.js`
    if (isProd) {
      config.devtool = false
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))
    config.plugins.delete('prefetch')
    config
      .plugin('html')
      .tap(args => {
        //修改为当前系统的名字
        args[0].title = '网站模板'
        return args
      });
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();
    // if prod is on
    // assets require on cdn
    if (isProd) {
      config.plugin('html').tap((args) => {
        return args
      })
    }
  },
  css: {
    loaderOptions: {
      less: {
        // 属性值包裹在lessOptions内
        lessOptions: {
          javascriptEnabled: true,
          globalVars: {
            primary: '#fff'
          }
        }
      }
    },
  },
  devServer: {
    // development server port 8000
    port: 8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
      '/api': {
        target: 'http://169.169.41.69:9527/',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '', // 路径重写，将前缀/apis转为"/"，也可以理解为"/apis"代替target里面的地址
          // 如果本身的接口地址就有"/api"这种通用前缀，也就是说https://www.exaple.com/api，就可以把pathRewrite删掉，如果没有则加上
        },
      }
    }
  },

  // disable source map in production
  productionSourceMap: false,
  lintOnSave: undefined,
  // babel-loader no-ignore node_modules/*
  transpileDependencies: [],
};



module.exports = vueConfig;